TypeScript のメリット – Front と Server の架け橋

TypeScript のメリット – Front と Server の架け橋

TypeScriptのinterfaceの利用した設計
Clock Icon2019.07.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

TypeScript のメリット - Front と Server の架け橋

webページに対しての要求が高度になり、JavaScript, HTML, CSS
のコード量も増えてきました
それに伴い 開発のしやすさ、保守のしやすさなどから
Single Page Application (以下SPA)や TypeScript に人気が集まっています

用語

SPA

React, Vue, Angular 等の ライブラリ, フレームワーク

TypeScript

AltJSの一種でJavaScriptにトランスパイル可能な言語
型があり安全な開発ができる

Front と Server の架け橋

架け橋とは、APIを示しています
それを、TypeScriptのinterfaceで強化する手法を説明していきます
例として ユーザ情報を取得する流れにしています

全体像

Server側

DBからuser情報取得する処理です
ポイントは返却値のinterfaceを定義する事です
これを、Front側で使用します

// repository/user.ts
export {
  User
}

interface User {
  id: number
  name: string
  age: number
  // etc...
}

function findUser(id: number): Promise<User> {
  // DBから一致するuser情報取得
  return db.find(id)
}

Front側

Server側の処理を、API経由で実行する処理です
ポイントは返却値のinterfaceimportします

// Server側のファイルをimport
import { User } from "repository/user"

function fetchUser(id: number): Promise<User> {
  return axios.get(`http://api.com/user/${id}`)
}


// メインの処理
const userId = 1
const user = await fetchUser(userId)
// user.id, user.name, user.age など補完が効く
// user.nicknameのような User interface に存在しないものはTypeScriptのエラーになる

Server側のTypeScriptフレームワークやライブラリなど

NestJS

Angular風の書き心地でコードが書けます
デコレータも登場します

NestJS

Marble.js

RxJSををベースとした functional reactive Node.js framework です
TypeScriptの相性もあり 注目しています

Marble.js

まとめ

interfaceを共有することで 型安全な開発ができます
Front側, Server側ともに TypeScriptで開発する場合は
このような設計を検討してみてください

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.